<script lang="ts">
  import { List, Li, Span, Badge, P} from 'svelte-5-ui-lib'

  import CopyButton from '$lib/components/IconComponents/CopyButton.svelte'
  import ApiRequest from '$lib/components/ApiRequest.svelte'
  import type { APIResourceItem } from '$lib/api/types'

  // 接口地址
  let apiRoute = $state('api/test/')

  const { currentAPI }: { currentAPI: APIResourceItem } = $props()
  // 从上下文中获取选中项和方法
</script>

<List tag="dl">
  <Li>
    <ApiRequest apiRoute={currentAPI?.endpoint} currentRequestMethod={currentAPI?.method || 'POST'}/>
  </Li>
  <Li class="flex items-center gap-2 h-6">
    <Badge color="indigo" class="w-24 flex-none">Endpoint</Badge>
    <Span class="text-zinc-600 text-md dark:text-gray-100 truncate flex-none min-w-0">
      {currentAPI?.endpoint}
    </Span>
    <CopyButton text={apiRoute} />
  </Li>
  <Li>
    <Badge color="teal" class="w-24">Description</Badge>
    <P
      size="sm"
      weight="light"
      height="5"
      class="bg-gray-50 p-4 mt-1 rounded-lg max-h-32 overflow-y-auto dark:text-primary-500  dark:bg-gray-700 "
    >
      {currentAPI?.desc}
    </P>
  </Li>
  <Li>
    <Badge color="fuchsia" class="w-24">Update At</Badge>
    <Span class="text-zinc-600 ml-1 text-sm dark:text-gray-100"
      >{currentAPI?.update_at}</Span
    >
  </Li>
  <Li>
    <Badge color="secondary" class="w-24">Update By</Badge>
    <Span class="text-zinc-600 ml-1 text-sm dark:text-gray-100"
      >{currentAPI?.update_by}</Span
    >
  </Li>
</List>
